<template>
  <!-- 售储企业配置 -->
  <div class="contentArea">
    <div class="headerArea">
      <a-button type="primary" @click="handleAdd">新增</a-button>
    </div>
    <div class="tableContent">
      <a-table
        :dataSource="tableData"
        :columns="columns"
        size="small"
        :scroll="{ x: 'max-content' }"
        @resizeColumn="handleResizeColumn"
        :pagination="false"
        :loading="tableLoading"
        bordered
      >
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.key === 'index'">
            {{ index + 1 }}
          </template>
          <template v-if="column.key === 'chargingTime'">
            <div class="timePeriods">
              <a-tag v-for="period in record.chargingTime" :key="period">
                {{ `${period.startTime}~${period.endTime}` }}
              </a-tag>
            </div>
          </template>
          <template v-if="column.key === 'dischargingTime'">
            <div class="timePeriods">
              <a-tag v-for="period in record.dischargingTime" :key="period">
                {{ `${period.startTime}~${period.endTime}` }}
              </a-tag>
            </div>
          </template>
          <template v-if="column.key === 'handle'">
            <a-button type="link" @click="handleEdit(record)">编辑</a-button>
            <!-- <a-popconfirm
              ok-text="确认"
              cancel-text="取消"
              @confirm="handleDelete(record)"
            >
              <template #title>是否确定删除该配置?</template>
              <a-button type="link" danger>删除</a-button>
            </a-popconfirm> -->
          </template>
        </template>
      </a-table>
      <!-- <a-pagination
        v-model:current="filterForm.current"
        v-model:page-size="filterForm.size"
        :total="total"
        position="bottomRight"
        show-size-changer
        @change="getConfigList"
        :show-total="(total) => `总共 ${total} 条`"
      >
        <template #buildOptionText="props">
          <span>{{ props.value }}条/页</span>
        </template>
      </a-pagination> -->
    </div>
  </div>
  <!-- 新增 -->
  <AddCompany
    v-model:addCompanyVisible="addCompanyVisible"
    @getConfigList="getConfigList"
  />
  <!-- 编辑 -->
  <EditCompany
    v-model:editCompanyVisible="editCompanyVisible"
    :rowData="rowData"
    @getConfigList="getConfigList"
  />
</template>

<script setup>


import AddCompany from "./addCompany.vue";
import EditCompany from "./editCompany.vue";
const $api = inject("$api");

const tableData = ref([
  {
    dischargePeriods: ["12:00-13:00", "14:00-15:00"],
  },
]);
const tableLoading = ref(false);
const total = ref(0);
const addCompanyVisible = ref(false);
const editCompanyVisible = ref(false);

const columns = ref([
  {
    title: "序号",
    dataIndex: "index",
    key: "index",
    width: 80,
    align: "center",
  },
  {
    title: "电站名称",
    dataIndex: "stationName",
    key: "stationName",
    width: 200,
    align: "center",
  },
  {
    title: "电站容量(MWh)",
    dataIndex: "capacity",
    key: "capacity",
    width: 150,
    align: "center",
  },
  {
    title: "所属省份",
    dataIndex: "province",
    key: "province",
    width: 120,
    align: "center",
  },
  {
    title: "所属城市",
    dataIndex: "city",
    key: "city",
    width: 120,
    align: "center",
  },
  {
    title: "储售收益测算电表数据取值时段",
    children: [
      {
        title: "充电取数时段",
        dataIndex: "chargingTime",
        key: "chargingTime",
        width: 300,
        align: "center",
      },
      {
        title: "放电取数时段",
        dataIndex: "dischargingTime",
        key: "dischargingTime",
        width: 300,
        align: "center",
      },
    ],
  },
  {
    title: "操作",
    key: "handle",
    width: 150,
    align: "center",
    fixed: "right",
  },
]);

function handleResizeColumn(w, col) {
  col.width = w;
}

const getConfigList = async () => {
  tableLoading.value = true;
  const res = await $api.sellStorageList();
  tableLoading.value = false;
  if (res?.code === 0) {
    tableData.value = res.data.map(item => ({
      ...item,
      stationName: item.station.stationName,
      capacity: item.station.capacity,
      province: item.station.provName,
      city: item.station.cityName,
    }));
  }
};

const handleAdd = () => {
  addCompanyVisible.value = true;
};
const rowData = ref({});
const handleEdit = (record) => {
  rowData.value = record;
  editCompanyVisible.value = true;
};
onMounted(() => {
  getConfigList();
});
</script>
<style lang="less" scoped>
.tableContent {
  margin-top: 15px;
  flex: 1;
  background-color: #141414;
  border-radius: 4px;
  padding: 8px;
}
.contentArea {
  margin-top: 5px;
  width: calc(100% - 200px);
  display: inline-block;
  vertical-align: top;
}
</style>